@import "@automattic/typography/styles/variables";

$large-tooltip-box-shadow-color: rgba(0, 0, 0, 0.05);

.tooltip.popover {
	outline: none;

	// always display the popover on top even inside a modal with a high z index
	z-index: 100000;

	.popover__arrow {
		border-width: 6px;
	}

	&.is-bottom-right,
	&.is-bottom-left,
	&.is-bottom {
		.popover__arrow {
			border-bottom-color: var(--color-neutral-60);
			top: 4px;

			&::before {
				display: none;
			}
		}

		&.is-error {
			.popover__arrow {
				border-bottom-color: var(--color-error);
			}
		}

		&.is-warning {
			.popover__arrow {
				border-bottom-color: var(--color-warning);
			}
		}

		&.is-success {
			.popover__arrow {
				border-bottom-color: var(--color-success);
			}
		}
	}

	&.is-top,
	&.is-top-left,
	&.is-top-right {
		.popover__arrow {
			border-top-color: var(--color-neutral-60);
			bottom: 4px;

			&::before {
				display: none;
			}
		}

		&.is-error {
			.popover__arrow {
				border-top-color: var(--color-error);
			}
		}

		&.is-warning {
			.popover__arrow {
				border-top-color: var(--color-warning);
			}
		}

		&.is-success {
			.popover__arrow {
				border-top-color: var(--color-success);
			}
		}
	}

	&.is-bottom-right,
	&.is-top-right {
		.popover__arrow {
			left: 15px #{"/*rtl:ignore*/"};
			margin-left: -6px #{"/*rtl:ignore*/"};
		}
	}

	&.is-bottom-left,
	&.is-top-left {
		.popover__arrow {
			right: 15px #{"/*rtl:ignore*/"};
			margin-right: -6px #{"/*rtl:ignore*/"};
		}
	}

	&.is-top,
	&.is-bottom {
		.popover__arrow {
			margin-left: -6px #{"/*rtl:ignore*/"};
		}
	}

	&.is-left,
	&.is-right {
		padding-top: 0;
		.popover__arrow {
			margin-top: -6px;

			&::before {
				display: none;
			}
		}

		&.is-error {
			.popover__arrow {
				border-right-color: var(--color-error);
			}
		}

		&.is-warning {
			.popover__arrow {
				border-right-color: var(--color-warning);
			}
		}

		&.is-success {
			.popover__arrow {
				border-right-color: var(--color-success);
			}
		}
	}

	&.is-left {
		.popover__arrow {
			margin-right: 4px;
			border-left-color: var(--color-neutral-60);
		}
	}

	&.is-right {
		.popover__arrow {
			margin-left: 4px;
			border-right-color: var(--color-neutral-60);
		}
	}

	.popover__inner {
		border: 0;
		box-shadow: none;
		border-radius: 2px;
		color: var(--color-text-inverted);
		background: var(--color-neutral-60);
		font-size: $font-body-extra-small;
		padding: 6px 10px;
		text-align: left;
	}

	&.is-error {
		.popover__inner {
			background: var(--color-error);
		}
	}

	&.is-warning {
		.popover__inner {
			background: var(--color-warning);
		}
	}

	&.is-success {
		.popover__inner {
			background: var(--color-success);
		}
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			font-size: $font-body-extra-small;
			font-weight: 400;
			border: 0;
			padding: 2px 0;
		}
	}

	&.tooltip--darker {
		&.is-bottom-right,
		&.is-bottom-left,
		&.is-bottom {
			.popover__arrow {
				border-bottom-color: var(--studio-gray-100);
			}
		}

		&.is-top,
		&.is-top-left,
		&.is-top-right {
			.popover__arrow {
				border-top-color: var(--studio-gray-100);
			}
		}

		.popover__inner {
			color: var(--studio-white);
			background: var(--studio-gray-100);
		}
	}

	&.tooltip--large {
		&.is-top .popover__arrow,
		&.is-top-left .popover__arrow,
		&.is-top-right .popover__arrow {
			border-top-color: var(--color-neutral-100);
			box-shadow: 0 1px 2px $large-tooltip-box-shadow-color;
		}

		.popover__inner {
			background-color: var(--color-neutral-100);
			box-shadow: 0 1px 2px $large-tooltip-box-shadow-color;
			border-radius: 4px;
			padding: 16px 24px;
		}
	}
}
